:root {
	font-family: myFont, Inter;
	line-height: 1.3; /*行间距！*/
	font-weight: 500;
	font-size: larger;
	color-scheme: light dark;

	/* 主题颜色变量 */
	--theme-color: #8305f1da;
	--theme-color-light: #b0e5f3;
	--theme-color-dark: #0e304d;
	--theme-text: #333333;
	--theme-background: #ffffff;
	--theme-hover: #646cff;
	--theme-border: #e5e7eb;
	--theme-shadow: rgba(0, 0, 0, 0.1);

	/* 渐变色变量 */
	--gradient-primary: linear-gradient(
		to right,
		var(--theme-color-light),
		var(--theme-color),
		var(--theme-color-dark)
	);

	color: var(--theme-text);
	background-color: var(--theme-background);
	font-synthesis: none;
	text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	font-weight: 1000;
	color: #646cff;
	text-decoration: inherit;
}
a:hover {
	color: var(--theme-color);
}

body {
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	place-items: flex-start;
	min-width: 320px;
	/* align-items: center; */
	width: 100vw;
}

h1 {
	font-size: 3.2em;
	line-height: 1.1;
}

button {
	border: 0;
	padding: 0.6em 1.8em;
	font-size: 1em;
	font-weight: 500;
	background-color: #1a1a1a;
	cursor: pointer;
	transition: border-color 0.25s; /*过渡*/
}
button:hover {
	border-color: #646cff;
}
/* button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
} */

img,
video {
	max-width: 100%; /* 确保图片和视频不会超出容器 */
	height: auto; /* 保持比例 */
}

#app {
	/* max-width: 1280px; */
	/* padding: 2rem;  内边距 */
	text-align: center;
	width: 100vw;
}

@font-face {
	font-family: 'myFont';
	src: url('./assets/font/myFont.ttf') format('truetype');
	font-style: normal;
}

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 0 0% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 0 0% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 0 0% 3.9%;
		--primary: 0 0% 9%;
		--primary-foreground: 0 0% 98%;
		--secondary: 0 0% 96.1%;
		--secondary-foreground: 0 0% 9%;
		--muted: 0 0% 96.1%;
		--muted-foreground: 0 0% 45.1%;
		--accent: 0 0% 96.1%;
		--accent-foreground: 0 0% 9%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;
		--border: 0 0% 89.8%;
		--input: 0 0% 89.8%;
		--ring: 0 0% 3.9%;
		--chart-1: 12 76% 61%;
		--chart-2: 173 58% 39%;
		--chart-3: 197 37% 24%;
		--chart-4: 43 74% 66%;
		--chart-5: 27 87% 67%;
		--radius: 0.5rem;
	}
	.dark {
		--background: 0 0% 3.9%;
		--foreground: 0 0% 98%;
		--card: 0 0% 3.9%;
		--card-foreground: 0 0% 98%;
		--popover: 0 0% 3.9%;
		--popover-foreground: 0 0% 98%;
		--primary: 0 0% 98%;
		--primary-foreground: 0 0% 9%;
		--secondary: 0 0% 14.9%;
		--secondary-foreground: 0 0% 98%;
		--muted: 0 0% 14.9%;
		--muted-foreground: 0 0% 63.9%;
		--accent: 0 0% 14.9%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 0 0% 14.9%;
		--input: 0 0% 14.9%;
		--ring: 0 0% 83.1%;
		--chart-1: 220 70% 50%;
		--chart-2: 160 60% 45%;
		--chart-3: 30 80% 55%;
		--chart-4: 280 65% 60%;
		--chart-5: 340 75% 55%;
	}
}
@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}

.outline {
	outline: 2px red solid;
}

::-webkit-scrollbar {
	width: 8px; /* 滚动条宽度 */
	background-color: var(--theme-background); /* 滚动条背景色 */
}

::-webkit-scrollbar-thumb {
	background-color: rgb(93, 191, 211); /* 滚动条滑块颜色 */
	border-radius: 10px; /* 滚动条滑块圆角 */
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--theme-hover); /* 滚动条滑块悬停颜色 */
}
